<template>
  <div class="container">
    <div style="background-color: #2758bb">
      <nav-bar subTitle="土地要素">
      </nav-bar>
    </div>
    <div class="body">
      <el-card shadow="never">
        <el-row :gutter="20">
          <template v-for="(item,index) in regionalElements">
            <el-col :span="8">
              <div class="la-box" :class="current===index?'la-show':''"
                   :style="{backgroundColor:item.bgColor,backgroundImage:`url(${item.logo})`}"
                   @click="setCurrent(index)"
              >
                <div style="height: 10px">
                </div>
                <div>
                  <strong :style="{color:item.color,fontSize:'30px'}"> {{ item.count }}</strong>
                  <small>{{ item.unit }}</small>
                </div>
                <div>
                  <strong>{{ item.area }}</strong>
                </div>
              </div>
            </el-col>
          </template>
        </el-row>
        <br>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="ov-title">
              <strong>区域分析</strong>
            </div>
            <div class="re-box">
              <el-table :data="tableData" height="260">
                <el-table-column type="index" label="排名" width="60"/>
                <el-table-column prop="resourceName" label="区域"/>
                <el-table-column prop="resourceCount" label="楼宇数量"/>
                <el-table-column prop="resourceSum" label="能耗(用电)/万千瓦时"/>
              </el-table>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="re-box">
              <div class="ov-title">
                <strong>区域用电千瓦时</strong>
              </div>
              <electricity-usage-echarts :tableData="trendList"></electricity-usage-echarts>
            </div>
          </el-col>
        </el-row>
        <br>

        <el-row :gutter="20">
          <el-col :span="12">
            <div class="ov-title">
              <strong>企业分析</strong>
            </div>
            <div class="re-box">
              <el-table :data="tableData2" height="260">
                <el-table-column type="index" label="排名" width="60"/>
                <el-table-column prop="resourceName" label="区域"/>
                <el-table-column prop="resourceSum" :label="current === 0?'能耗(用电)/万千瓦时':'人工(用人)/万人'"/>
              </el-table>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="re-box">
              <div class="ov-title">
                <strong>企业用电千瓦时</strong>
              </div>
              <enterprise-electricity-consumption-echarts
                  :tableData="regionTrend"></enterprise-electricity-consumption-echarts>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>


<script setup>
import NavBar from "@/components/navBar.vue";
import {analyse2, analyseData, regionalElements, regionTrendData, trendData} from './data/data.js'
import {ref} from "vue";
import ElectricityUsageEcharts from "@/views/resourceElements/Echarts/ElectricityUsageEcharts.vue";
import EnterpriseElectricityConsumptionEcharts
  from "@/views/resourceElements/Echarts/EnterpriseElectricityConsumptionEcharts.vue";

const current = ref(0)

const tableData = ref(analyseData[current.value])
const tableData2 = ref(analyse2[current.value])

const trendList = ref(trendData[current.value])
const regionTrend = ref(regionTrendData[current.value])

const setCurrent = (index) => {
  current.value = index
  tableData.value = analyseData[index]
  tableData2.value = analyse2[index]
  trendList.value = trendData[index]
  regionTrend.value = regionTrendData[index]
}

</script>

<style scoped lang="scss">
.container {
  background-color: #ecf1f7;
}

.body {
  box-sizing: border-box;
  padding: 15px;
  background-color: #ecf1f7;
}

.la-box {
  height: 140px;
  border: 1px solid #efefef;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 120px;
  padding-top: 10px;
  box-sizing: border-box;
  cursor: pointer;

  > div {
    margin: 8px 0;
  }

}

.la-show {
  height: 140px;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: calc(50% - 10px);
    bottom: -10px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    background-color: inherit;
  }
}

.ov-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;

  > strong {
    font-size: 16px;
    border-left: 4px solid #2368fa;
    padding-left: 10px;
  }
}

.la-sb {
  padding: 15px;
  background-color: #f7f9fc;
  border-radius: 4px;
  font-size: 18px;
  color: #666;
  text-align: center;

  > strong {
    font-weight: bold;
    color: #ffa33c;
  }
}

.re-box {
  height: auto;
}

</style>
